<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>個人履歷表</title>

    <style>

    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
    }

    li {
    float: left;
    }

    li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }

    li a:hover:not(.active) {
    background-color: #ddd;
    }

    li a.active {
    color: white;
    background-color: #4CAF50;
    }

    
    body
    {
        background-image:url('1114.jpg');
        background-repeat:repeat-y;
    }

    .center { 
    text-align: center; 
    }

    a { 
    text-decoration: none;
    color: #6d3185;
    }

    table {
    margin: auto;    
    border-collapse: collapse;
    }

    table, td, th {
    border: 1px solid rgb(63, 30, 59);
    }

    table
    {
    float: conter;
	width:40%;
    }

    p.italic {font-style:italic;}
    
    /*圖片簡介*/
    
    div.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
    }

    div.img:hover {
    border: 1px solid #777;
    }

    div.img img {
    width: 100%;
    height: auto;
    }

    div.desc {
    padding: 15px;
    text-align: left;
    }


    </style>


</head>

<body>
    <ul>
        <li><a class="active" href="https://cdn.rawgit.com/SherryChen0304/wd106b/0388c606/exercise/02-resume%20homework/02-resume%20homework.html">主頁</a></li>
        <li><a href="#about">關於</a></li>
        <li><a href="#picture">照片</a></li>
    </ul>

    <div class="center">
    <img src="IMG_3919.JPG" alt="Pulpit rock" width="304" height="228">
    <h1>陳士茵 (Sherry Chen)<span class="badge badge-secondary"></span></h1>
    </div>
    <table border="5">
            <tr>
                <th>欄位</th>
                <th>內容</th>
            </tr>

            <tr>
                <td>身分</td>
                <td>學生</td>   
            </tr>
            
            <tr>
                <td>性別</td>
                <td>女生</td>
                
            </tr>

            <tr>
                    <td>就讀學校</td>
                    <td>國立金門大學</td>    
            </tr>

            <tr>
                    <td>科系</td>
                    <td>資訊工程學系</td>    
            </tr>

            <tr>
                    <td>學號</td>>
                    <td>110610529</td>
            </tr>

            <tr>
                    <td>E-mail</td>
                    <td>dearsherrychen@gmail.com</td>   
            </tr>

            <tr>
                    <td>個人Git網站</td>
                    <td><a href="https://github.com/SherryChen0304" target="_blank">SherryChen0304</a></td>
            </tr>

            <tr>
                    <td>Facebook</td>
                    <td><a href="https://www.facebook.com/sherry.chen.35380399" target="_blank">陳士茵</a></td>
            </tr>

            <tr>
                <td>運動</td>
                <td>游泳</td>
            </tr>    
    
            <tr>
                <td>血型</td>>
                <td>A型</td>
                
            </tr>

            <tr>
                <td>興趣</td>>
                <td>看電影、看小說</td>>
            </tr>
        </table>
     
        <h2>關於我的故事 <span class="badge badge-secondary">(自我介紹)</span></h2>
        
        
        <div class="center">
                <div class="img">
                    <img src="IMG_2488.JPG" alt="Pulpit rock" width="304" height="228">
                <div class="desc">去年暑假尾聲，新生入學，抱著緊張的心情，來到即將就讀的大學。與家人在校園裡逛了逛，開心的在大學池中的亭子留了影。希望未來的大學四年，過得多采多姿！</div>
                </div>
              </div>
               
              <div class="center">
                <div class="img">
                    <img src="IMG_3983.JPG" alt="Pulpit rock" width="354" height="278">
                <div class="desc">懷念以前高中的時光，固定的課桌椅，固定的座位，自從升上大學，就是跑堂上課了，有些感慨。順帶一提，我高中就讀私立格致高級中學。</div>
                </div>
              </div>
               
              <div class="center">
                <div class="img">
                    <img src="IMG_2704.JPG" alt="Pulpit rock" width="354" height="278">
                <div class="desc">因為上大學，所以有機會來到金門，當然要把握大學四年的時光，好好探索金門這塊島嶼。只要有空閒時間，就可以和朋友相揪出遊玩。我喜歡認真的讀書後，好好地玩，放鬆心情。</div>
                </div>
              </div>
               
              <div class="center">
                <div class="img">
                    <img src="IMNC5620.JPG" alt="Pulpit rock" width="304" height="228">
                  <div class="desc">希望在大學四年，能好好的充實自己！</div>
                </div>  
              </div>> 



        
</body>

</html>